<template>
  <div class="box_yj" ref="parent">
    <span></span>
    <div class="section-header">温江区出台政策占比</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { getRegionalPolicy } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      chartData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // background: 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    init() {
      this.jz=false
      getRegionalPolicy(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        if(data && data.length > 0){
          let newData = data.sort((a,b) => b.Number - a.Number)

          this.chartData = newData.filter(v=>{
            v['name'] = v.name;
            v['value'] = Number(v.value);
            return v;
          });
		  console.log('getRegionalPolicygetRegionalPolicygetRegionalPolicy')
		  console.log(this.chartData)
          this.chartsInit();
        }else{
          this.chartData = null;
        }
      });
    },
    chartsInit() {
      let option = {

        // legend: {
        //   bottom: 0,
        //   textStyle: {
        //     color: 'rgba(255, 255, 255, 0.3)'
        //   }
        // },

        tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: ['#4c7ef0','#b86cc6','#ff7899','#7fe5ff','#fed866','#5eca41','#5eca41','#16c88b'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: this.chartData,
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    formatter: (params) => {
						return params.data.name;
                      return params.data.name+ '(' + params.data.value + "篇)"
                    }
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },

                animationType: 'scale',
                animationEasing: 'elasticOut',
                animationDelay: function (idx) {
                    return Math.random() * 200;
                }
            }
        ]
      };
      let chart = this.$echarts.init(this.$refs.charts);
      chart.setOption(option);
    }
  }
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>